<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			#main {
				width: 600px;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<script src="./echarts.min.js"></script>
		<script>
			const myChart = echarts.init(document.getElementById('main'))
			const option = {
				title: {
					text: '夏轲  19组',
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					axisLabel: {
						color: 'red',
					},
					axisLine: {
						lineStyle: {
							type: 'dashed',
						},
					},
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed',
						},
					},
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)',
						},
						color: [
							{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: 'skyblue', // 0% 处的颜色
									},
									{
										offset: 1,
										color: 'pink', // 100% 处的颜色
									},
								],
								global: false, // 缺省为 false
							},
						],
					},
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)',
						},
						color: {
							type: 'radial',
							x: 0.5,
							y: 0.5,
							r: 0.5,
							colorStops: [
								{ offset: 0, color: '#fff' },
								{ offset: 1, color: 'red' },
							],
							global: false,
						},
					},
				],
			}
			myChart.setOption(option)
		</script>
	</body>
</html>
